<script type="text/javascript">
function preview(img, selection) {
	var scaleX = {TH_WIDTH} / selection.width;
	var scaleY = {TH_HEIGTH} / selection.height;

	$('#thumbnail + div > img').css({
		width: Math.round(scaleX * {IMG_WIDTH} ) + 'px',
		height: Math.round(scaleY * {IMG_HEIGTH}) + 'px',
		marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
		marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
	});
	$('#x1').val(selection.x1);
	$('#y1').val(selection.y1);
	$('#x2').val(selection.x2);
	$('#y2').val(selection.y2);
	$('#w').val(selection.width);
	$('#h').val(selection.height);
}

$(document).ready(function () {
	$('#save_thumb').click(function() {
		var x1 = $('#x1').val();
		var y1 = $('#y1').val();
		var x2 = $('#x2').val();
		var y2 = $('#y2').val();
		var w = $('#w').val();
		var h = $('#h').val();
		if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
			alert("You must make a selection first");
			return false;
		}else{
			return true;
		}
	});
});

$(window).load(function () {
	$('#thumbnail').imgAreaSelect({ aspectRatio: '{ASPECT_RATIO}', onSelectChange: preview });
});

</script>

<h1>{LANG_ADMIN_IMAGEUPLOADEDSUCCESS}</h1>
<small>{LANG_ADMIN_IMAGEUPLOADEDSUCCESS_HELP}</small>
<div align="center">

<img src="{PIC}" style="border:2px #e5e5e5 solid; float: left;" id="thumbnail" alt="{LANG_ADMIN_THUMBIMAGE_CREATE}" />   
<div style="border:2px #e5e5e5 solid; float:left; position:relative; overflow:hidden; width:{TH_WIDTH}px; height:{TH_HEIGTH}px;"> <img src="{PIC}"
	style="position: relative;" alt="{LANG_ADMIN_THUMBIMAGE_PREVIEW}" /></div>
<br style="clear: both;" />
<form name="thumbnail" action="{PHP_FILE_SAVE}?do=save_crop" method="post">
    <input type="hidden" name="x1" value="" id="x1" />
    <input type="hidden" name="y1" value="" id="y1" />
    <input type="hidden" name="x2" value="" id="x2" />
    <input type="hidden" name="y2" value="" id="y2" />
    <input type="hidden" name="w" value="" id="w" />
    <input type="hidden" name="h" value="" id="h" />
    <br>
    <input type="submit" class="button" name="upload_thumbnail" value="{LANG_ADMIN_IMAGE_SAVE}" id="save_thumb" />
  </form>
</div>